<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <link rel="stylesheet" href="../css/animate.css">
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <title>Document</title>
    <style>
         .box{
            width:50%;
            min-height:300px;
            border:1px solid #999;
            border-radius: 10px;
            background: rgb(228, 174, 183);
            padding: 30px;

        }
        .router-link-exact-active, .router-link-active{
            font-size: 30px;
            font-weight: bold;
            color:#f50;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}} </h2>

        <!-- 5.路由出口 路由匹配到的组件将渲染在这里 -->
       <router-view class="box"></router-view>

        <!-- 6.路由跳转 声明式 -->

    </div>

    <template id="main">
        <div>
            <h2>main - 微信的主路由 </h2>
            <hr>
            <router-view></router-view>
            <hr>
            <myfoot></myfoot>
        </div>
    </template>

    <template id="wechat">
        <div>
            <h2>wechat - 微信-1  </h2>
        </div>
    </template>

    <template id="contact">
        <div>
            <h2>contact -- 通讯录-2</h2>
            <div>
                <p v-for="(v,i) in players" :key="i">
                    <router-link :to="{name:'detail',params:{id:v.id},query:v}">{{v.name}}</router-link>
                </p>
            </div>
        </div>
    </template>

    <template id="find">
        <div>
            <h2>Find  - 朋友圈 </h2>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>mine - 个人中心 </h2>
        </div>
    </template>

    <template id="notfound">
        <div>
            <h2>404 - 404 - NotFOund </h2>
        </div>
    </template>

    <template id="myfoot">
        <footer>
            <router-link v-for="(l,i) in flist" :key="i" :to="{name:l.name}">
                {{l.title}}
            </router-link>
        </footer>
    </template>

    <template id="detail">
        <div>
            <h2>歌手 详情  - <button @click="$router.go(-1)">返回</button></h2>
            <h2>id --- {{$route.params.id }}</h2>
            <h2>name -- {{$route.query.name }}</h2>
            <img :src="$route.query.picUrl" width="300" height="300" alt="">
        </div>
    </template>

  
    <script>


        Vue.component("myfoot",{
                    template:"#myfoot",
                    data(){
                        return {
                            flist:[
                                {   path:"/main/wechat",name:"wechat",icon:"",title:"微信" },
                                {   path:"/main/contact",name:"contact",icon:"",title:"通讯录" },
                                {   path:"/main/find",name:"find",icon:"",title:"朋友圈" },
                                {   path:"/main/mine",name:"mine",icon:"",title:"我的"},
                            ]
                        }
                    }
                })

        // 1.定义路由组件
       const Main = {
           template:'#main'
       }

       const Wechat = {
           template:'#wechat',
        //    mounted(){},
        //    methods:{},
       }

       const Contact = {
           template:'#contact',
           data(){
               return{
                   players:[]
               }
           },
           mounted(){
               $.ajax({
                   url:"http://47.104.209.44:3333/artist/list",
                   type:"GET",
                   success:res=>{
                       console.log(res);
                       this.players = res.artists
                   }
               })
           }
       }

       const Find = {
           template:"#find"
       }  

       const Mine = {
            template:"#mine"
        }
      
       const Detail = {
           template:'#detail'
       }
      
       const Notfound = {
           template:"#notfound",
           
       }
           

        // 2.定义一些路由
        //每个路由都需要映射一个组件
        const routes = [
            {
                path:"/",
                redirect:"/main"
            },
            {
                path:"/main",
                name:"main",
                redirect:"/main/wechat",
                component:Main,
                children:[   // 子路由  对应一个 router-view  (children 属于哪个组件  router-view 就写在哪个组件内部 )
                    {   path:"/main/wechat",name:"wechat",component:Wechat },
                    {   path:"/main/contact",name:"contact",component:Contact },
                    {   
                        path:"/main/find",
                        name:"find",
                        component:Find,
                        beforeEnter:(to,from,next)=>{
                            if(window.confirm('你知道要进入我的朋友圈查看吗?')){
                                next()
                            }else{
                                next(false)
                            }
                        }
                    },
                    {   path:"/main/mine",name:"mine",component:Mine },
                ]
            },
            {
                path:"/404",
                name:"notFound",
                component:Notfound
            },
            {
                path:"/detail/:id",
                name:'detail',
                component:Detail
            },
            {
                path:'*',
                redirect:"/404"
            }
        ]
        // const routes = [
        //     {path:"/",redirect:"/main"},

        //     {path:"/mian",name:'mian',redirect:'/mian/wechat',component:Main,children:[
        //         {path:"/main/wechat",name:'wechat',component:Wechat},
        //         {path:"/main/contact",name:'contact',component:Contact},
        //         {path:"/main/find",name:'find',component:Find},
        //         {path:"/main/mine",name:"mine",component:Mine },

        //     ]},
        //     {
        //         path:"/404",
        //         name:"notFound",
        //         component:Notfound
        //     },
        //     {
        //         path:"/detail/:id",
        //         name:'detail',
        //         component:Detail
        //     },
        //     {path:"*",redirect:"/404"},
        // ]
        // 3. 创建路由实例并传递 `routes` 配置 你可以在这里输入更多的配置
        //# 表示 hash 路由
        const router = new VueRouter({
            routes,
            mode:'hash',
           
        })


        // scrollBehavior 滚动行为 
        // base 应用的基路径  一般不用设置   采用是相对路径   上线的时候才需要单独去设置路径
        // mode 路由模式   
        // hash  url地址的 hash 模式  兼容性强     带#号 可以刷新浏览器  但是地址比较长 不简洁
        // history  不带 # 号  不能刷新浏览器 (需要服务器重定向404 )   比较简洁优雅   依赖 HTML5 History API 和服务器配置

        // 4.路由挂载到根实例
        const vm = new Vue ({
            router, // this.$route
            data:{
                title:"Vue 路由初步 - 微信App嵌套路由"
            },
            watch:{
                '$route':function(to,from){
                    console.log(to);
                    console.log(from);
                }
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title
                console.log(this.$router);
                 // 路由对象  负责路由跳转 路由导航和路由全局监听
                console.log(this.$route);
                // 路由信息对象  当前激活的路由对象  路由参数 query(?)&params(:)  
            }
        }).$mount('#app')
    </script>

        <!-- router.go(1)
        router.goforward();    前进
        router.go(-1);       后退 
        router.back()   -->
</body>
</html>